/**
 * AI角色扮演应用主类
 * 负责管理整个应用的状态和交互逻辑
 */
class AIRolePlayApp {
    constructor() {
        // WebSocket连接对象，用于与后端通信
        this.websocket = null;

        // 当前选中的角色对象
        this.currentCharacter = null;

        // 当前登录的用户名
        this.currentUser = null;

        // 语音录制相关状态
        this.isRecording = false;
        this.mediaRecorder = null;
        this.audioChunks = [];

        // 当前进行的游戏类型
        this.currentGame = null;

        // 角色管理相关数据
        this.allCharacters = [];  // 所有角色的完整列表
        this.filteredCharacters = [];  // 经过筛选后的角色列表
        this.currentFilter = 'all';  // 当前的筛选条件
        this.currentPersonality = null;  // 当前选择的性格筛选
        this.searchTerm = '';  // 当前的搜索关键词
        this.displayedCount = 0;  // 当前显示的角色数量
        this.charactersPerPage = 8;  // 每页显示的角色数量

        // 收藏角色列表（存储在localStorage中）
        this.favoriteCharacters = JSON.parse(localStorage.getItem('favoriteCharacters') || '[]');

        // 初始化应用
        this.init();
    }

    /**
     * 初始化应用程序
     * 绑定事件监听器并建立WebSocket连接
     */
    init() {
        this.bindEvents();
        this.connectWebSocket();
        this.initializeCharacterData();
    }

    /**
     * 初始化角色数据（演示数据）
     * 在实际应用中，这些数据应该从后端API获取
     */
    initializeCharacterData() {
        // 预定义角色数据，包含丰富的属性信息
        this.allCharacters = [
            {
                id: 1,
                name: "小爱",
                type: "assistant",
                personality: "温和",
                background: "智能生活助手，擅长日程管理和生活建议",
                tags: ["助手", "贴心", "实用"],
                avatar: "xiaoai.jpg",
                isOnline: true,
                isPremium: false,
                isNew: false
            },
            {
                id: 2,
                name: "夏洛特",
                type: "companion",
                personality: "活泼",
                background: "阳光开朗的陪伴者，喜欢聊天和分享趣事",
                tags: ["陪伴", "活泼", "聊天"],
                avatar: "charlotte.jpg",
                isOnline: true,
                isPremium: true,
                isNew: false
            },
            {
                id: 3,
                name: "亚里士多德",
                type: "expert",
                personality: "严谨",
                background: "古代哲学家，精通逻辑思辨和智慧分享",
                tags: ["哲学", "智慧", "思辨"],
                avatar: "aristotle.jpg",
                isOnline: false,
                isPremium: true,
                isNew: false
            },
            {
                id: 4,
                name: "小丑",
                type: "entertainment",
                personality: "幽默",
                background: "幽默风趣的娱乐达人，专门讲笑话和搞怪",
                tags: ["幽默", "娱乐", "搞笑"],
                avatar: "joker.jpg",
                isOnline: true,
                isPremium: false,
                isNew: true
            },
            {
                id: 5,
                name: "神秘法师",
                type: "entertainment",
                personality: "神秘",
                background: "来自异世界的神秘魔法师，掌握古老的魔法知识",
                tags: ["魔法", "神秘", "奇幻"],
                avatar: "wizard.jpg",
                isOnline: true,
                isPremium: true,
                isNew: true
            },
            {
                id: 6,
                name: "心理医生",
                type: "expert",
                personality: "温和",
                background: "专业心理咨询师，善于倾听和情感疏导",
                tags: ["心理", "咨询", "倾听"],
                avatar: "psychologist.jpg",
                isOnline: true,
                isPremium: false,
                isNew: false
            }
        ];

        // 初始化时显示所有角色
        this.filteredCharacters = [...this.allCharacters];
        this.updateCharacterStats();
    }

    /**
     * 绑定所有事件监听器
     * 包括用户交互、WebSocket消息、界面切换等
     */
    bindEvents() {
        // 用户登录相关事件
        document.getElementById('loginBtn').addEventListener('click', () => this.login());
        document.getElementById('username').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') this.login();
        });

        // 角色搜索和筛选事件
        document.getElementById('searchBtn').addEventListener('click', () => this.searchCharacters());
        document.getElementById('clearSearchBtn').addEventListener('click', () => this.clearSearch());
        document.getElementById('characterSearch').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') this.searchCharacters();
        });

        // 实时搜索（输入时即时筛选）
        document.getElementById('characterSearch').addEventListener('input', (e) => {
            this.searchTerm = e.target.value.trim();
            this.applyFilters();
        });

        // 角色类型筛选按钮事件
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', (e) => this.setTypeFilter(e.target.dataset.filter));
        });

        // 性格特点筛选按钮事件
        document.querySelectorAll('.personality-btn').forEach(btn => {
            btn.addEventListener('click', (e) => this.setPersonalityFilter(e.target.dataset.personality));
        });

        // 加载更多角色按钮
        document.getElementById('loadMoreBtn').addEventListener('click', () => this.loadMoreCharacters());

        // 聊天功能
        document.getElementById('sendBtn').addEventListener('click', () => this.sendMessage());
        document.getElementById('messageInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') this.sendMessage();
        });

        // 语音功能
        document.getElementById('voiceBtn').addEventListener('click', () => this.toggleRecording());
        document.getElementById('stopVoiceBtn').addEventListener('click', () => this.stopRecording());

        // 界面切换
        document.getElementById('backBtn').addEventListener('click', () => this.showCharacterSelection());
        document.getElementById('skillsBtn').addEventListener('click', () => this.showSkillsPanel());
        document.getElementById('closeSkillsBtn').addEventListener('click', () => this.hideSkillsPanel());

        // 技能按钮
        document.querySelectorAll('.skill-btn').forEach(btn => {
            btn.addEventListener('click', (e) => this.useSkill(e.target.closest('.skill-card').dataset.skill));
        });

        // 游戏功能
        document.getElementById('closeGameBtn').addEventListener('click', () => this.hideGameInterface());
        document.querySelectorAll('.btn-game').forEach(btn => {
            btn.addEventListener('click', (e) => this.startGame(e.target.dataset.game));
        });
        document.getElementById('gameSubmitBtn').addEventListener('click', () => this.submitGameInput());
        document.getElementById('gameInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') this.submitGameInput();
        });

        // 错误提示关闭
        document.getElementById('closeErrorBtn').addEventListener('click', () => this.hideErrorToast());

        // 新增：键盘快捷键支持
        document.addEventListener('keydown', (e) => this.handleKeyboardShortcuts(e));

        // 新增：窗口调整大小时的响应
        window.addEventListener('resize', () => this.handleWindowResize());

        // 新增：页面可见性变化检测
        document.addEventListener('visibilitychange', () => this.handleVisibilityChange());
    }

    /**
     * 设置角色类型筛选
     * @param {string} filterType - 筛选类型 ('all', 'assistant', 'companion', 'expert', 'entertainment')
     */
    setTypeFilter(filterType) {
        // 更新激活状态的按钮样式
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        document.querySelector(`[data-filter="${filterType}"]`).classList.add('active');

        this.currentFilter = filterType;
        this.applyFilters();
    }

    /**
     * 设置性格特点筛选
     * @param {string} personality - 性格类型
     */
    setPersonalityFilter(personality) {
        // 切换性格筛选按钮的激活状态
        const button = document.querySelector(`[data-personality="${personality}"]`);
        const isActive = button.classList.contains('active');

        // 清除所有性格按钮的激活状态
        document.querySelectorAll('.personality-btn').forEach(btn => {
            btn.classList.remove('active');
        });

        if (!isActive) {
            button.classList.add('active');
            this.currentPersonality = personality;
        } else {
            this.currentPersonality = null;
        }

        this.applyFilters();
    }

    /**
     * 应用所有筛选条件
     * 根据类型、性格、搜索关键词等条件筛选角色
     */
    applyFilters() {
        let filtered = [...this.allCharacters];

        // 按类型筛选
        if (this.currentFilter !== 'all') {
            filtered = filtered.filter(char => char.type === this.currentFilter);
        }

        // 按性格筛选
        if (this.currentPersonality) {
            filtered = filtered.filter(char => char.personality === this.currentPersonality);
        }

        // 按搜索关键词筛选
        if (this.searchTerm) {
            const searchLower = this.searchTerm.toLowerCase();
            filtered = filtered.filter(char =>
                char.name.toLowerCase().includes(searchLower) ||
                char.background.toLowerCase().includes(searchLower) ||
                char.personality.toLowerCase().includes(searchLower) ||
                char.tags.some(tag => tag.toLowerCase().includes(searchLower))
            );
        }

        this.filteredCharacters = filtered;
        this.displayedCount = 0;
        this.displayCharacters();
        this.updateCharacterStats();
    }

    /**
     * 清除搜索条件
     */
    clearSearch() {
        document.getElementById('characterSearch').value = '';
        this.searchTerm = '';
        this.applyFilters();
    }

    /**
     * 更新角色统计信息显示
     */
    updateCharacterStats() {
        const total = this.filteredCharacters.length;
        const online = this.filteredCharacters.filter(char => char.isOnline).length;
        const favorites = this.favoriteCharacters.length;

        document.getElementById('totalCharacters').textContent = total;
        document.getElementById('onlineCharacters').textContent = online;
        document.getElementById('favoriteCharacters').textContent = favorites;
    }

    /**
     * 加载更多角色（分页加载）
     */
    loadMoreCharacters() {
        const remaining = this.filteredCharacters.length - this.displayedCount;
        if (remaining > 0) {
            this.displayCharacters(false); // false表示不清空现有显示
        }
    }

    /**
     * 建立WebSocket连接
     * 处理连接状态和消息通信
     */
    connectWebSocket() {
        try {
            this.websocket = new WebSocket('ws://115.190.136.40:9002');

            // 连接成功事件
            this.websocket.onopen = () => {
                console.log('WebSocket连接已建立');
                this.showSuccess('已连接到服务器');
                this.loadCharacters();
            };

            // 接收消息事件
            this.websocket.onmessage = (event) => {
                try {
                    const data = JSON.parse(event.data);
                    this.handleWebSocketMessage(data);
                } catch (error) {
                    console.error('解析WebSocket消息失败:', error);
                    this.showError('服务器消息格式错误');
                }
            };

            // 连接断开事件
            this.websocket.onclose = (event) => {
                console.log('WebSocket连接已断开:', event.code, event.reason);
                if (event.code !== 1000) { // 非正常关闭
                    this.showError('与服务器连接断开，将使用离线模式');
                    // 启用离线模式，使用本地数据
                    this.loadCharacters();
                }
            };

            // 连接错误事件
            this.websocket.onerror = (error) => {
                console.error('WebSocket连接错误:', error);
                this.showError('连接服务器失败，将使用离线演示模式');
                // 连接失败时使用本地演示数据
                setTimeout(() => {
                    this.loadCharacters();
                }, 1000);
            };
        } catch (error) {
            console.error('WebSocket初始化失败:', error);
            this.showError('无法初始化网络连接，使用离线模式');
            // 初始化失败时使用本地数据
            this.loadCharacters();
        }
    }

    /**
     * 处理WebSocket接收到的消息
     * @param {Object} data - 服务器发送的数据对象
     */
    handleWebSocketMessage(data) {
        console.log('收到WebSocket消息:', data.type);

        switch (data.type) {
            case 'character_list':
                // 接收到角色列表数据
                if (data.data && Array.isArray(data.data)) {
                    this.allCharacters = data.data;
                    this.filteredCharacters = [...this.allCharacters];
                    this.displayCharacters();
                    this.updateCharacterStats();
                } else {
                    console.warn('角色列表数据格式错误，使用本地数据');
                    this.displayCharacters();
                }
                break;

            case 'conversation_started':
                // 对话开始响应
                this.startConversation(data);
                break;

            case 'ai_response':
                // AI回复消息
                this.displayAIMessage(data.message);
                this.hideLoading();
                break;

            case 'emotion_response':
                // 情感分析响应
                this.displayEmotionResponse(data);
                this.hideLoading();
                break;

            case 'knowledge_response':
                // 知识查询响应
                this.displayKnowledgeResponse(data.response);
                this.hideLoading();
                break;

            case 'game_response':
                // 游戏互动响应
                this.displayGameResponse(data.response);
                this.hideLoading();
                break;

            case 'error':
                // 错误消息
                this.showError(data.message || '服务器发生未知错误');
                this.hideLoading();
                break;

            case 'server_status':
                // 服务器状态信息
                console.log('服务器状态:', data.status);
                break;

            default:
                console.warn('未知的消息类型:', data.type, data);
        }
    }

    /**
     * 用户登录处理
     * 验证用户名并更新UI状态
     */
    login() {
        const usernameInput = document.getElementById('username');
        const username = usernameInput.value.trim();

        // 验证用户名
        if (!username) {
            this.showError('请输入用户名');
            usernameInput.focus();
            return;
        }

        // 验证用户名长度和格式
        if (username.length < 2) {
            this.showError('用户名至少需要2个字符');
            usernameInput.focus();
            return;
        }

        if (username.length > 20) {
            this.showError('用户名不能超过20个字符');
            usernameInput.focus();
            return;
        }

        // 保存用户信息
        this.currentUser = username;

        // 更新UI状态
        const loginBtn = document.getElementById('loginBtn');
        loginBtn.textContent = `👋 ${username}`;
        loginBtn.disabled = true;
        loginBtn.classList.add('logged-in');
        usernameInput.disabled = true;

        // 保存用户信息到本地存储
        localStorage.setItem('currentUser', username);
        localStorage.setItem('loginTime', new Date().toISOString());

        this.showSuccess(`欢迎回来，${username}！请选择AI角色开始对话`);

        // 自动加载用户的收藏角色
        this.loadUserPreferences();
    }

    /**
     * 加载用户偏好设置
     * 包括收藏角色、主题设置等
     */
    loadUserPreferences() {
        const savedUser = localStorage.getItem('currentUser');
        if (savedUser && !this.currentUser) {
            // 自动恢复登录状态
            document.getElementById('username').value = savedUser;
            // 可以选择是否自动登录
        }
    }

    /**
     * 从后端加载角色列表
     * 如果WebSocket未连接，则使用本地演示数据
     */
    loadCharacters() {
        if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) {
            // WebSocket未连接时使用本地数据
            console.log('WebSocket未连接，使用本地演示数据');
            this.displayCharacters();
            return;
        }

        // 向后端请求角色列表
        try {
            this.websocket.send(JSON.stringify({ action: 'get_characters' }));
        } catch (error) {
            console.error('发送角色列表请求失败:', error);
        }
    }

    /**
     * 显示角色卡片
     * @param {boolean} clearExisting - 是否清空现有显示的角色
     */
    displayCharacters(clearExisting = true) {
        const grid = document.getElementById('characterGrid');

        if (clearExisting) {
            grid.innerHTML = '';
            this.displayedCount = 0;
        }

        // 确定本次要显示的角色数量
        const startIndex = this.displayedCount;
        const endIndex = Math.min(startIndex + this.charactersPerPage, this.filteredCharacters.length);
        const charactersToShow = this.filteredCharacters.slice(startIndex, endIndex);

        // 创建角色卡片
        charactersToShow.forEach(character => {
            const card = document.createElement('div');
            card.className = 'character-card fade-in';

            // 判断角色是否被收藏
            const isFavorite = this.favoriteCharacters.includes(character.id);
            const favoriteClass = isFavorite ? 'active' : '';

            // 构建角色卡片HTML
            card.innerHTML = `
                <!-- 角色类型指示器 -->
                <div class="character-type ${character.isPremium ? 'premium' : ''} ${character.isNew ? 'new' : ''}"></div>

                <!-- 角色头像 -->
                <img src="assets/avatars/${character.avatar}" alt="${character.name}"
                     onerror="this.src='assets/avatars/default.jpg'">

                <!-- 角色基本信息 -->
                <h3>${character.name}</h3>
                <p class="character-personality">${character.personality} • ${this.getTypeDisplayName(character.type)}</p>
                <p class="character-background">${character.background}</p>

                <!-- 角色标签 -->
                <div class="character-tags">
                    ${character.tags.map(tag => `<span class="character-tag">${tag}</span>`).join('')}
                </div>

                <!-- 操作按钮 -->
                <div class="character-actions">
                    <button class="btn btn-primary select-btn">选择角色</button>
                    <button class="btn btn-secondary favorite-btn ${favoriteClass}" data-character-id="${character.id}">
                        ${isFavorite ? '💖' : '🤍'}
                    </button>
                </div>

                <!-- 在线状态指示器 -->
                <div class="online-status ${character.isOnline ? 'online' : 'offline'}">
                    <span class="status-dot"></span>
                    <span class="status-text">${character.isOnline ? '在线' : '离线'}</span>
                </div>
            `;

            // 绑定选择角色事件
            card.querySelector('.select-btn').addEventListener('click', (e) => {
                e.stopPropagation();
                this.selectCharacter(character);
            });

            // 绑定收藏切换事件
            card.querySelector('.favorite-btn').addEventListener('click', (e) => {
                e.stopPropagation();
                this.toggleFavorite(character.id);
            });

            grid.appendChild(card);
        });

        // 更新显示计数
        this.displayedCount = endIndex;

        // 控制"加载更多"按钮的显示
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        if (this.displayedCount < this.filteredCharacters.length) {
            loadMoreBtn.style.display = 'block';
            loadMoreBtn.textContent = `加载更多 (${this.filteredCharacters.length - this.displayedCount} 个剩余)`;
        } else {
            loadMoreBtn.style.display = 'none';
        }
    }

    /**
     * 获取角色类型的显示名称
     * @param {string} type - 角色类型代码
     * @returns {string} 显示名称
     */
    getTypeDisplayName(type) {
        const typeNames = {
            'assistant': '智能助手',
            'companion': '陪伴角色',
            'expert': '专业专家',
            'entertainment': '娱乐角色'
        };
        return typeNames[type] || '未知类型';
    }

    /**
     * 切换角色收藏状态
     * @param {number} characterId - 角色ID
     */
    toggleFavorite(characterId) {
        const index = this.favoriteCharacters.indexOf(characterId);
        const favoriteBtn = document.querySelector(`[data-character-id="${characterId}"]`);

        if (index === -1) {
            // 添加到收藏
            this.favoriteCharacters.push(characterId);
            favoriteBtn.classList.add('active');
            favoriteBtn.textContent = '💖';
            this.showSuccess('已添加到收藏');
        } else {
            // 从收藏中移除
            this.favoriteCharacters.splice(index, 1);
            favoriteBtn.classList.remove('active');
            favoriteBtn.textContent = '🤍';
            this.showSuccess('已从收藏中移除');
        }

        // 保存到本地存储
        localStorage.setItem('favoriteCharacters', JSON.stringify(this.favoriteCharacters));
        this.updateCharacterStats();
    }

    /**
     * 选择角色并开始对话
     * @param {Object} character - 选中的角色对象
     */
    selectCharacter(character) {
        // 验证用户是否已登录
        if (!this.currentUser) {
            this.showError('请先登录后再选择角色');
            return;
        }

        // 检查角色是否在线（如果需要）
        if (!character.isOnline && character.isPremium) {
            this.showError('该角色当前离线，请选择其他角色或稍后再试');
            return;
        }

        // 更新UI状态
        document.querySelectorAll('.character-card').forEach(card => {
            card.classList.remove('active');
        });

        // 保存当前选择的角色
        this.currentCharacter = character;

        // 显示加载状态
        this.showLoading('正在连接角色...');

        // 记录角色选择统计
        this.recordCharacterSelection(character);

        // 向服务器发送开始对话请求
        if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
            this.websocket.send(JSON.stringify({
                action: 'start_conversation',
                character: character.name,
                characterId: character.id,
                username: this.currentUser,
                timestamp: new Date().toISOString()
            }));
        } else {
            // 离线模式下的处理
            console.log('离线模式：模拟角色对话开始');
            setTimeout(() => {
                this.startConversation({
                    character: character.name,
                    greeting: this.generateOfflineGreeting(character)
                });
            }, 1000);
        }
    }

    /**
     * 记录角色选择统计信息
     * @param {Object} character - 被选择的角色
     */
    recordCharacterSelection(character) {
        const selections = JSON.parse(localStorage.getItem('characterSelections') || '{}');
        selections[character.id] = (selections[character.id] || 0) + 1;
        localStorage.setItem('characterSelections', JSON.stringify(selections));
    }

    /**
     * 生成离线模式下的角色问候语
     * @param {Object} character - 角色对象
     * @returns {string} 问候语
     */
    generateOfflineGreeting(character) {
        const greetings = {
            'assistant': `你好${this.currentUser}！我是${character.name}，你的智能助手。虽然现在是离线模式，但我仍然可以为你提供基本的对话服务。有什么可以帮助你的吗？`,
            'companion': `嗨~${this.currentUser}！我是${character.name}，很高兴见到你！虽然网络有点问题，但这不影响我们聊天哦~ 今天心情怎么样？`,
            'expert': `${this.currentUser}，您好。我是${character.name}。目前系统在离线模式运行，但我依然可以为您提供专业的咨询和建议。请问有什么问题需要探讨吗？`,
            'entertainment': `哈喽！${this.currentUser}！我是超有趣的${character.name}！虽然现在是离线模式，但快乐可不会离线哦！准备好和我一起玩耍了吗？🎉`
        };

        return greetings[character.type] || `你好${this.currentUser}，我是${character.name}。虽然现在是离线模式，但我们仍然可以愉快地聊天！`;
    }

    startConversation(data) {
        this.hideLoading();
        this.showChatInterface();

        // 设置角色信息
        document.getElementById('currentCharacterName').textContent = data.character;
        document.getElementById('currentCharacterAvatar').src = `assets/avatars/${data.character}.jpg`;
        document.getElementById('currentCharacterAvatar').onerror = function() {
            this.src = 'assets/avatars/default.jpg';
        };
        document.getElementById('currentCharacterDesc').textContent = this.currentCharacter.personality;

        // 显示问候消息
        this.displayAIMessage(data.greeting);
    }

    sendMessage() {
        const input = document.getElementById('messageInput');
        const message = input.value.trim();

        if (!message) return;

        if (!this.currentCharacter) {
            this.showError('请先选择角色');
            return;
        }

        this.displayUserMessage(message);
        input.value = '';
        this.showLoading();

        // 离线模式或WebSocket未连接时的处理
        if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) {
            // 模拟AI回复
            setTimeout(() => {
                const mockResponse = this.generateMockResponse(message);
                this.displayAIMessage(mockResponse);
                this.hideLoading();
            }, 1500);
            return;
        }

        try {
            this.websocket.send(JSON.stringify({
                action: 'send_message',
                message: message,
                character: this.currentCharacter.name,
                username: this.currentUser
            }));
        } catch (error) {
            console.error('发送消息失败:', error);
            this.hideLoading();
            this.showError('消息发送失败，请重试');
        }
    }

    displayUserMessage(message) {
        const chatMessages = document.getElementById('chatMessages');
        const messageDiv = document.createElement('div');
        messageDiv.className = 'message user fade-in';
        messageDiv.innerHTML = `
            ${message}
            <div class="timestamp">${new Date().toLocaleTimeString()}</div>
        `;
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    displayAIMessage(message) {
        const chatMessages = document.getElementById('chatMessages');
        const messageDiv = document.createElement('div');
        messageDiv.className = 'message ai fade-in';
        messageDiv.innerHTML = `
            ${message}
            <div class="timestamp">${new Date().toLocaleTimeString()}</div>
        `;
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;

        // 语音播放（模拟）
        this.playTTS(message);
    }

    async toggleRecording() {
        if (!this.isRecording) {
            await this.startRecording();
        } else {
            this.stopRecording();
        }
    }

    async startRecording() {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            this.mediaRecorder = new MediaRecorder(stream);
            this.audioChunks = [];

            this.mediaRecorder.ondataavailable = (event) => {
                this.audioChunks.push(event.data);
            };

            this.mediaRecorder.onstop = () => {
                const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
                this.processAudioInput(audioBlob);
            };

            this.mediaRecorder.start();
            this.isRecording = true;

            document.getElementById('voiceStatus').style.display = 'block';
            document.getElementById('voiceBtn').style.background = '#ff5252';
        } catch (error) {
            console.error('Error accessing microphone:', error);
            this.showError('无法访问麦克风，请检查权限设置');
        }
    }

    stopRecording() {
        if (this.mediaRecorder && this.isRecording) {
            this.mediaRecorder.stop();
            this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
            this.isRecording = false;

            document.getElementById('voiceStatus').style.display = 'none';
            document.getElementById('voiceBtn').style.background = '#ff6b6b';
        }
    }

    processAudioInput(audioBlob) {
        // 模拟语音识别结果
        const mockRecognitionResults = [
            "你好，今天天气真不错",
            "我想听听你的故事",
            "能告诉我一些有趣的事情吗",
            "我心情有点不好",
            "你能安慰我一下吗"
        ];

        const randomResult = mockRecognitionResults[Math.floor(Math.random() * mockRecognitionResults.length)];
        document.getElementById('messageInput').value = randomResult;

        this.showSuccess('语音识别完成');
    }

    playTTS(text) {
        // 模拟TTS播放
        const utterance = new SpeechSynthesisUtterance(text);
        utterance.lang = 'zh-CN';
        utterance.rate = 0.9;
        utterance.pitch = 1.1;

        speechSynthesis.speak(utterance);
    }

    useSkill(skillType) {
        if (!this.currentCharacter) {
            this.showError('请先选择角色');
            return;
        }

        switch (skillType) {
            case 'emotion':
                this.useEmotionSkill();
                break;
            case 'knowledge':
                this.useKnowledgeSkill();
                break;
            case 'game':
                this.useGameSkill();
                break;
        }
    }

    useEmotionSkill() {
        const lastMessage = this.getLastUserMessage();
        if (!lastMessage) {
            this.showError('请先发送一条消息再使用情感分析');
            return;
        }

        this.showLoading();

        // 检查WebSocket连接状态
        if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) {
            // 离线模式下的情感分析
            setTimeout(() => {
                const mockEmotion = this.analyzeMockEmotion(lastMessage);
                this.displayEmotionResponse({
                    detected_emotion: mockEmotion.emotion,
                    response: mockEmotion.response
                });
                this.hideLoading();
            }, 1000);
            return;
        }

        try {
            this.websocket.send(JSON.stringify({
                action: 'emotion_analysis',
                message: lastMessage,
                character: this.currentCharacter.name
            }));
        } catch (error) {
            console.error('情感分析请求失败:', error);
            this.hideLoading();
            this.showError('情感分析功能暂时不可用');
        }
    }

    useKnowledgeSkill() {
        const query = prompt('请输入你想了解的问题：');
        if (!query) return;

        this.showLoading();

        // 检查WebSocket连接状态
        if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) {
            // 离线模式下的知识问答
            setTimeout(() => {
                const mockKnowledge = this.generateMockKnowledge(query);
                this.displayKnowledgeResponse(mockKnowledge);
                this.hideLoading();
            }, 1200);
            return;
        }

        try {
            this.websocket.send(JSON.stringify({
                action: 'knowledge_query',
                query: query,
                character: this.currentCharacter.name
            }));
        } catch (error) {
            console.error('知识查询请求失败:', error);
            this.hideLoading();
            this.showError('知识查询功能暂时不可用');
        }
    }

    useGameSkill() {
        this.hideSkillsPanel();
        this.showGameInterface();
    }

    displayEmotionResponse(data) {
        const chatMessages = document.getElementById('chatMessages');
        const messageDiv = document.createElement('div');
        messageDiv.className = 'message ai fade-in';
        messageDiv.innerHTML = `
            <strong>🎭 情感分析结果：</strong><br>
            检测到情感：${data.detected_emotion}<br><br>
            ${data.response}
            <div class="timestamp">${new Date().toLocaleTimeString()}</div>
        `;
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    displayKnowledgeResponse(response) {
        const chatMessages = document.getElementById('chatMessages');
        const messageDiv = document.createElement('div');
        messageDiv.className = 'message ai fade-in';
        messageDiv.innerHTML = `
            <strong>📚 知识回答：</strong><br><br>
            ${response}
            <div class="timestamp">${new Date().toLocaleTimeString()}</div>
        `;
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    startGame(gameType) {
        this.currentGame = gameType;
        const gameArea = document.getElementById('gameArea');
        const gameTitle = document.getElementById('gameTitle');
        const gameInput = document.querySelector('.game-input');

        gameInput.style.display = 'flex';

        switch (gameType) {
            case 'riddle':
                gameTitle.textContent = '🧩 猜谜游戏';
                gameArea.innerHTML = '<p>点击下方按钮开始猜谜游戏！</p>';
                this.sendGameAction('start');
                break;
            case 'story':
                gameTitle.textContent = '📖 故事接龙';
                gameArea.innerHTML = '<p>请输入故事的开头，AI角色会帮你继续这个故事：</p>';
                break;
            case 'poem':
                gameTitle.textContent = '🎨 诗歌创作';
                gameArea.innerHTML = '<p>请输入一个主题，AI角色会为你创作一首诗：</p>';
                break;
        }
    }

    submitGameInput() {
        const input = document.getElementById('gameInput');
        const userInput = input.value.trim();

        if (!userInput) return;

        input.value = '';
        this.sendGameAction(userInput);
    }

    sendGameAction(input) {
        this.showLoading();
        this.websocket.send(JSON.stringify({
            action: 'interactive_game',
            game_type: this.currentGame,
            character: this.currentCharacter.name,
            input: input
        }));
    }

    displayGameResponse(response) {
        const gameArea = document.getElementById('gameArea');
        const currentContent = gameArea.innerHTML;
        gameArea.innerHTML = currentContent + `<p><strong>AI回应：</strong> ${response}</p>`;
        gameArea.scrollTop = gameArea.scrollHeight;
    }

    getLastUserMessage() {
        const messages = document.querySelectorAll('.message.user');
        if (messages.length > 0) {
            const lastMessage = messages[messages.length - 1];
            return lastMessage.textContent.replace(/\d{1,2}:\d{2}:\d{2}.*$/, '').trim();
        }
        return null;
    }

    /**
     * 执行角色搜索
     * 从搜索框获取关键词并应用筛选
     */
    searchCharacters() {
        this.searchTerm = document.getElementById('characterSearch').value.trim();
        this.applyFilters();
    }

    // 界面切换方法
    showCharacterSelection() {
        document.getElementById('characterSelection').style.display = 'block';
        document.getElementById('chatInterface').style.display = 'none';
        this.hideSkillsPanel();
        this.hideGameInterface();
    }

    showChatInterface() {
        document.getElementById('characterSelection').style.display = 'none';
        document.getElementById('chatInterface').style.display = 'flex';
        document.getElementById('chatMessages').innerHTML = '';
    }

    showSkillsPanel() {
        document.getElementById('skillsPanel').style.display = 'block';
    }

    hideSkillsPanel() {
        document.getElementById('skillsPanel').style.display = 'none';
    }

    showGameInterface() {
        document.getElementById('gameInterface').style.display = 'block';
    }

    hideGameInterface() {
        document.getElementById('gameInterface').style.display = 'none';
        document.querySelector('.game-input').style.display = 'none';
    }

    /**
     * 显示加载动画
     * @param {string} message - 加载提示文字
     */
    showLoading(message = 'AI正在思考中...') {
        const loadingElement = document.getElementById('loading');
        const loadingText = loadingElement.querySelector('p');
        if (loadingText) {
            loadingText.textContent = message;
        }
        loadingElement.style.display = 'flex';
    }

    /**
     * 隐藏加载动画
     */
    hideLoading() {
        document.getElementById('loading').style.display = 'none';
    }

    /**
     * 显示错误提示
     * @param {string} message - 错误信息
     * @param {number} duration - 显示时长（毫秒），默认5秒
     */
    showError(message, duration = 5000) {
        const errorToast = document.getElementById('errorToast');
        const errorMessage = document.getElementById('errorMessage');

        errorMessage.textContent = message;
        errorToast.style.display = 'flex';
        errorToast.classList.add('slide-in');

        // 记录错误日志
        console.error('应用错误:', message);

        // 自动隐藏
        setTimeout(() => this.hideErrorToast(), duration);
    }

    /**
     * 显示成功提示
     * @param {string} message - 成功信息
     * @param {number} duration - 显示时长（毫秒），默认3秒
     */
    showSuccess(message, duration = 3000) {
        // 创建成功提示元素
        const successDiv = document.createElement('div');
        successDiv.className = 'success-toast';
        successDiv.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--success-color);
            color: white;
            padding: 15px 20px;
            border-radius: 10px;
            z-index: 1001;
            font-size: 14px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            animation: slideInRight 0.3s ease-out;
            max-width: 300px;
            word-wrap: break-word;
        `;

        // 添加图标和文字
        successDiv.innerHTML = `
            <span style="margin-right: 8px;">✅</span>
            <span>${message}</span>
        `;

        document.body.appendChild(successDiv);

        // 记录成功操作日志
        console.log('操作成功:', message);

        // 自动移除
        setTimeout(() => {
            if (document.body.contains(successDiv)) {
                successDiv.style.animation = 'slideOutRight 0.3s ease-in';
                setTimeout(() => {
                    if (document.body.contains(successDiv)) {
                        document.body.removeChild(successDiv);
                    }
                }, 300);
            }
        }, duration);
    }

    /**
     * 隐藏错误提示
     */
    hideErrorToast() {
        const errorToast = document.getElementById('errorToast');
        errorToast.classList.remove('slide-in');
        errorToast.classList.add('slide-out');

        setTimeout(() => {
            errorToast.style.display = 'none';
            errorToast.classList.remove('slide-out');
        }, 300);
    }

    /**
     * 生成模拟AI回复（离线模式）
     * @param {string} message - 用户消息
     * @returns {string} 模拟回复
     */
    generateMockResponse(message) {
        if (!this.currentCharacter) {
            return "你好！很高兴与你对话！";
        }

        const responses = {
            '小爱': [
                "作为你的智能助手，我来帮你解决这个问题。",
                "根据我的分析，这个情况可以这样处理...",
                "让我为你整理一下相关信息。"
            ],
            '夏洛特': [
                "哇！这个话题真有意思！我也想聊聊~",
                "嘿嘿，你说得对！我们继续聊下去吧！",
                "好开心能和你分享这些！"
            ],
            '亚里士多德': [
                "从哲学角度来看，这个问题值得深入思考。",
                "让我们用逻辑来分析这个现象。",
                "智慧在于认识自己的无知。"
            ],
            '小丑': [
                "哈哈哈！这让我想起一个笑话...",
                "生活需要幽默，让我们快乐一点！",
                "😄 你知道吗？快乐是会传染的！"
            ],
            '神秘法师': [
                "古老的魔法告诉我，这其中蕴含着神秘的力量...",
                "在魔法的世界里，一切皆有可能。",
                "✨ 让魔法为你指引方向。"
            ],
            '心理医生': [
                "我能感受到你的情绪，让我们慢慢聊聊。",
                "每个人都有自己的感受，这很正常。",
                "倾诉是治愈心灵的第一步。"
            ]
        };

        const characterResponses = responses[this.currentCharacter.name] || responses['小爱'];
        return characterResponses[Math.floor(Math.random() * characterResponses.length)];
    }

    /**
     * 模拟情感分析（离线模式）
     * @param {string} message - 要分析的消息
     * @returns {Object} 情感分析结果
     */
    analyzeMockEmotion(message) {
        const emotions = {
            '开心': ['开心', '高兴', '快乐', '哈哈', '兴奋', '棒', '好'],
            '悲伤': ['难过', '悲伤', '哭', '痛苦', '失望', '沮丧'],
            '愤怒': ['生气', '愤怒', '气死', '讨厌', '烦'],
            '恐惧': ['害怕', '恐惧', '紧张', '担心', '焦虑'],
            '惊讶': ['惊讶', '震惊', '意外', '没想到'],
            '平静': []
        };

        let detectedEmotion = '平静';
        for (const [emotion, keywords] of Object.entries(emotions)) {
            if (keywords.some(keyword => message.includes(keyword))) {
                detectedEmotion = emotion;
                break;
            }
        }

        const responses = {
            '开心': `${this.currentCharacter.name}能感受到你的快乐！让我们一起分享这份美好的心情吧！`,
            '悲伤': `${this.currentCharacter.name}理解你现在的心情。虽然现在很难过，但请相信，我会一直陪伴着你。`,
            '愤怒': `${this.currentCharacter.name}能感受到你的愤怒。让我们冷静下来，一起找到解决问题的方法。`,
            '恐惧': `${this.currentCharacter.name}会保护你。不要害怕，我们一起面对这些困难。`,
            '惊讶': `${this.currentCharacter.name}也很惊讶！生活总是充满意外呢。`,
            '平静': `${this.currentCharacter.name}感受到了你内心的平静，这是一种很好的状态。`
        };

        return {
            emotion: detectedEmotion,
            response: responses[detectedEmotion]
        };
    }

    /**
     * 生成模拟知识回答（离线模式）
     * @param {string} query - 查询问题
     * @returns {string} 知识回答
     */
    generateMockKnowledge(query) {
        const knowledgeBase = {
            '天气': '今天的天气很不错呢！不过具体的天气情况需要查看实时天气预报哦。',
            '时间': `现在的时间是 ${new Date().toLocaleTimeString()}`,
            '学习': '学习是一个持续的过程，保持好奇心和耐心很重要。',
            '工作': '工作中遇到困难是正常的，重要的是保持积极的心态。',
            '健康': '身体健康很重要，记得要合理饮食和适当运动。',
            '音乐': '音乐是心灵的语言，能够治愈和激励我们。',
            '编程': '编程是一门艺术，需要逻辑思维和创造力的结合。',
            '游戏': '游戏可以带来快乐，但也要适度游戏哦。'
        };

        // 简单的关键词匹配
        for (const [keyword, answer] of Object.entries(knowledgeBase)) {
            if (query.includes(keyword)) {
                return answer;
            }
        }

        return `关于"${query}"的问题，${this.currentCharacter.name}正在思考中...虽然现在是离线模式，但我会尽力为你解答！`;
    }

    /**
     * 键盘快捷键处理
     * @param {KeyboardEvent} e - 键盘事件
     */
    handleKeyboardShortcuts(e) {
        // Ctrl/Cmd + Enter 发送消息
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
            if (document.getElementById('chatInterface').style.display !== 'none') {
                this.sendMessage();
            }
        }

        // Escape 键关闭面板
        if (e.key === 'Escape') {
            this.hideSkillsPanel();
            this.hideGameInterface();
        }

        // Ctrl/Cmd + / 搜索角色
        if ((e.ctrlKey || e.metaKey) && e.key === '/') {
            e.preventDefault();
            const searchInput = document.getElementById('characterSearch');
            if (searchInput) {
                searchInput.focus();
            }
        }

        // F5 刷新连接
        if (e.key === 'F5' && !e.shiftKey) {
            e.preventDefault();
            this.reconnectWebSocket();
        }
    }

    /**
     * 窗口大小调整处理
     */
    handleWindowResize() {
        // 根据窗口大小调整UI布局
        const width = window.innerWidth;
        const characterGrid = document.getElementById('characterGrid');

        if (width < 768) {
            // 移动端布局
            if (characterGrid) {
                characterGrid.style.gridTemplateColumns = '1fr';
            }
        } else if (width < 1024) {
            // 平板布局
            if (characterGrid) {
                characterGrid.style.gridTemplateColumns = 'repeat(2, 1fr)';
            }
        } else {
            // 桌面端布局
            if (characterGrid) {
                characterGrid.style.gridTemplateColumns = 'repeat(auto-fit, minmax(280px, 1fr))';
            }
        }
    }

    /**
     * 页面可见性变化处理
     */
    handleVisibilityChange() {
        if (document.hidden) {
            // 页面隐藏时的处理
            console.log('页面已隐藏，暂停某些操作');
        } else {
            // 页面显示时的处理
            console.log('页面重新显示，恢复操作');
            // 可以在这里检查连接状态
            this.checkConnectionStatus();
        }
    }

    /**
     * 检查连接状态
     */
    checkConnectionStatus() {
        if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) {
            console.log('WebSocket连接已断开，尝试重连...');
            this.reconnectWebSocket();
        }
    }

    /**
     * 重新连接WebSocket
     */
    reconnectWebSocket() {
        if (this.websocket) {
            this.websocket.close();
        }

        setTimeout(() => {
            this.connectWebSocket();
        }, 1000);
    }

    /**
     * 增强的消息显示，支持更多样式
     * @param {string} message - AI消息
     */
    displayAIMessage(message) {
        const chatMessages = document.getElementById('chatMessages');
        const messageDiv = document.createElement('div');
        messageDiv.className = 'message ai fade-in';

        // 处理特殊消息格式
        let processedMessage = this.processMessageFormatting(message);

        messageDiv.innerHTML = `
            ${processedMessage}
            <div class="timestamp">${new Date().toLocaleTimeString()}</div>
        `;

        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;

        // 语音播放（模拟）
        this.playTTS(message);

        // 添加特殊效果
        this.addMessageEffects(messageDiv);
    }

    /**
     * 处理消息格式化
     * @param {string} message - 原始消息
     * @returns {string} 格式化后的消息
     */
    processMessageFormatting(message) {
        // 处理表情符号
        message = message.replace(/:\)/g, '😊');
        message = message.replace(/:\(/g, '😢');
        message = message.replace(/<3/g, '💖');

        // 处理强调文本
        message = message.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
        message = message.replace(/\*(.*?)\*/g, '<em>$1</em>');

        // 处理换行
        message = message.replace(/\n/g, '<br>');

        return message;
    }

    /**
     * 为消息添加特殊效果
     * @param {HTMLElement} messageElement - 消息元素
     */
    addMessageEffects(messageElement) {
        // 随机添加一些视觉效果
        const effects = ['pulse', 'glow', 'bounce'];
        const randomEffect = effects[Math.floor(Math.random() * effects.length)];

        setTimeout(() => {
            messageElement.classList.add(randomEffect);
            setTimeout(() => {
                messageElement.classList.remove(randomEffect);
            }, 1000);
        }, 500);
    }

    /**
     * 增强的错误处理
     * @param {string} message - 错误消息
     * @param {string} type - 错误类型
     */
    showError(message, type = 'error') {
        const errorToast = document.getElementById('errorToast');
        const errorMessage = document.getElementById('errorMessage');

        // 根据错误类型设置不同样式
        errorToast.className = `error-toast ${type}`;
        errorMessage.textContent = message;
        errorToast.style.display = 'flex';
        errorToast.classList.add('slide-in');

        // 记录错误日志
        console.error(`[${type.toUpperCase()}] ${message}`);

        // 发送错误统计（如果需要）
        this.trackError(message, type);

        // 自动隐藏
        setTimeout(() => this.hideErrorToast(), 5000);
    }

    /**
     * 错误追踪（用于分析和改进）
     * @param {string} message - 错误消息
     * @param {string} type - 错误类型
     */
    trackError(message, type) {
        // 可以发送到分析服务
        const errorData = {
            message,
            type,
            timestamp: new Date().toISOString(),
            userAgent: navigator.userAgent,
            url: window.location.href,
            currentCharacter: this.currentCharacter?.name || null
        };

        // 存储到本地用于调试
        const errors = JSON.parse(localStorage.getItem('errorLog') || '[]');
        errors.push(errorData);
        // 只保留最近100条错误
        if (errors.length > 100) {
            errors.splice(0, errors.length - 100);
        }
        localStorage.setItem('errorLog', JSON.stringify(errors));
    }
}

// 创建默认头像目录（用于演示）
function createDefaultAssets() {
    // 这里可以添加创建默认资源的逻辑
    console.log('Default assets loaded');
}

// 初始化应用
document.addEventListener('DOMContentLoaded', () => {
    createDefaultAssets();
    new AIRolePlayApp();
});

// 错误处理
window.addEventListener('error', (event) => {
    console.error('Global error:', event.error);
});

// WebSocket错误重连逻辑
window.addEventListener('beforeunload', () => {
    if (window.aiApp && window.aiApp.websocket) {
        window.aiApp.websocket.close();
    }
});